<template>
  <div class="newList">
    <div
      class="newList-title"
      v-if="titleConfigs.title && listAll.length>0"
    >{{titleConfigs.title || '聚焦'}}</div>
    <van-list
      v-if="listAll.length>0"
      v-model="loading"
      :finished-text="finishedText"
      :finished="finished"
      @load="onLoad"
      class="news-box"
    >
      <van-cell class="news-item" v-for="(i,index) in list" :key="index">
        <newsItem :i="i"></newsItem>
      </van-cell>
    </van-list>
  </div>
</template>

<script type="text/ecmascript-6">
import { getchannelinfolist } from "../../api/sort";
import newsItem from "./newstLi";
export default {
  props: ["titleConfig", "limit"],
  components: {
    newsItem
  },
  data() {
    return {
      titleConfigs: this.titleConfig || {},
      list: [],
      finished: false,
      finishedText: "",
      listAll: [], //所有新闻，规定只给50条，当所有新闻,自己做分页功能
      error: false,
      loading: false,
      channel: this.$route.query.channel, //代表菜单种类
      page: 0,
      pageSize: 10
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        let begin = this.page * this.pageSize;
        let end = (this.page + 1) * this.pageSize;
        for (let i = begin; i < end; i++) {
          if (this.listAll[i]) {
             this.list.push(this.listAll[i]);
          }
        }
        this.page++;
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= this.listAll.length) {
          this.finished = true;
          if (this.listAll.length > 4) {
            this.finishedText = "没有更多数据";
          }
        }
      }, 500);
    },
    //获取新闻信息
    getchannelist() {
      let obj = this.$route.query || {};
      obj.channel = this.channel;
      if (this.limit) {
        obj.limit = this.limit;
      }
      getchannelinfolist(obj).then(res => {
        if (res.code === "0000") {
          this.listAll = res.data || [];
        }
      });
    }
  },
  created() {
    this.getchannelist();
  }
};
</script>

<style scoped lang="less">
.newList {
  background: #ffffff;
  margin-bottom: 0.2rem;
}
.newList-title {
  padding: 0 0.5rem;
  height: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: relative;
  font-size: .34rem;
  font-weight: bolder;
  &::after {
    position: absolute;
    left: 0.2rem;
    top: 50%;
    margin-top: -0.16rem;
    display: block;
    content: "";
    width: 0.08rem;
    height: 0.32rem;
    background: #e49d35;
    border-radius: 0.05rem;
  }
  .icon {
    margin-right: 0.1rem;
  }
  .newList-title-p1 {
    display: flex;
    align-items: center;
    font-size: 0.36rem;
    font-weight: bold;
    color: rgba(21, 23, 35, 1);
  }
  .newList-title-p2 {
    color: rgba(110, 111, 117, 1);
    display: flex;
    align-items: center;
  }
}
.news-box {
  padding: 0 0.3rem 0;
  .news-item {
    border-top: 0.01rem solid rgba(216, 216, 216, 1);
    padding: 0.3rem 0;
    color: rgba(21, 23, 35, 1);
  }
}
</style>
